<!DOCTYPE html>
<html>

<head>
    <title>Example GeoGebra applet embedding</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="navigation.js"></script>
</head>

<body>
<div>
<h1>Example GeoGebra applet embedding</h1>
<p>This is an example of an HTML file containing two GeoGebra applets, one loaded from GeoGebra Materials Platform, the other one from local .ggb file.</p>

<script type="text/javascript" src="https://cdn.geogebra.org/apps/deployggb.js"></script>
<script type="text/javascript">

    // Create applet for material_id 17499 from GeoGebra Materials Platform. The second parameter forces not to use webSimple.
    // The third parameter sets the bordercolor. Additional parameters can be defined as described here: https://www.geogebra.org/manual/en/Reference:Applet_Parameters
    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);

    //  when used with Math Apps Bundle, uncomment this:
    //  applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web/');
	// Create applet for file ../ggb/sine-curves.ggb
    // The second parameter forces not to use webSimple (this is necessary when multiple applets are used on one page, if one cannot use webSimple).
    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);

    //  when used with Math Apps Bundle, uncomment this:
    //  applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web/');
    window.onload = function() {
        applet1.inject('applet_container1');
        applet2.inject('applet_container2');
    }
</script>

Here is the first applet:<p>
<div style="width:748px;height:397px;display:block" id="applet_container1"></div>

<p>
Here is the second applet:<p>
<div style="width:907px;height:415px;display:block" id="applet_container2"></div>
<p>

    That is all!
</div>
</body>

</html>
